<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />

		<style>
			ul {
				font-size: 14px;
				color: #8f8f94;
			}
			.mui-btn {
				padding: 10px;
			}
			
		</style>
	</head>

	<body>
	    
	    <!--my body go-->
	    
	    <!--header-->
	    <header class="mui-bar mui-bar-nav">
	        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	        <h1 id="title" class="mui-title">魅力大乱斗</h1>
	    </header> 
	    <!--main-->
	    <div class="index">
	    	<div class="abccc" style="padding:50px;">
	    		首页
	    	</div>
	    </div>
	     
	    <!--bottom-->
	    <footer>
            <nav class="mui-bar mui-bar-tab">
                <a id="webview_index" class="mui-tab-item mui-active" href="index.html">
                    <span class="mui-icon mui-icon-home"></span>
                    <span class="mui-tab-label">首页</span>
                </a>
                <a id="webview_main"  class="mui-tab-item" href="main.html">
                    <span class="mui-icon mui-icon-pengyouquan"></span>
                    <span class="mui-tab-label">魅力展示</span>
                </a>
                <a id="webview_luandou"  class="mui-tab-item" href="luandou.html">
                    <span class="mui-icon mui-icon-spinner"></span>
                    <span class="mui-tab-label">魅力乱斗</span>
                </a>
                <a id="webview_mycenter"  class="mui-tab-item" href="mycenter.html">
                    <span class="mui-icon mui-icon-contact"></span>
                    <span class="mui-tab-label">我的</span>
                </a>
            </nav> 
        </footer>
	    
	    <!--my body end-->
	    <script src="js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
	    <script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
	    <script>
            (function($, doc) {
                $.init();

            var menu = null,
                list = null,
                mask = null;
            var showMenu = false;
            var subpages = ['index.html','main.html', 'luandou.html', 'mycenter.html'];
            var subpage_style = {
                top: '46px',
                bottom: '50px'
            };
            mui.plusReady(function() {
               
                
                //竖屏显示
                plus.screen.lockOrientation("portrait-primary"); 
                
                // 隐藏滚动条
                plus.webview.currentWebview().setStyle({
                    scrollIndicator: 'none'
                });

                //当前的webview对象，应该为一个只有头和尾的
                var self = plus.webview.currentWebview();
                for (var i = 0; i < 4; i++) { 
                    //创建多个子的页面webview对象
                    var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
                    if (i > 0) {
                        sub.hide(); 
                    }
                    self.append(sub);
                }
            });
            
            
             //当前激活选项
            var activeTab = subpages[0];
            var title = document.getElementById("title");
             //选项卡点击事件
            mui('.mui-bar-tab').on('tap', 'a', function(e) {
                var targetTab = this.getAttribute('href');
                if (targetTab == activeTab) { //点击的当前活动的不处理
                    return;
                } else {
                    
                    
                    
                    //更换标题
                    var tname = this.querySelector('.mui-tab-label').innerHTML;

                    if (tname == "首页") {
                        tname = "魅力大乱斗";
                    }
                    title.innerHTML = tname;
                    //显示目标选项卡
                    plus.webview.show(targetTab, "auto");
                    //隐藏当前;
                    plus.webview.hide(activeTab);
                    //更改当前活跃的选项卡
                    activeTab = targetTab; 
//                  alert(targetTab);
                }
            }); 
                    //退出提醒
                    var backButtonPress = 0;
                    $.back = function(event) {
                        backButtonPress++;
                        if (backButtonPress > 1) {
                            plus.runtime.quit();
                        } else {
                            plus.nativeUI.toast('再按一次退出应用');
                        }
                        setTimeout(function() {
                            backButtonPress = 0;
                        }, 1000);
                        return false;
                    };

                    
                
            }(mui, document));
        </script>
	    
	    
	</body>

</html>